<template>
  <a-card :title="$t('selected') + ' ' + this.selectedRows.length + ' ' + $t('room')">
    <template #extra>
      <a-space>
        <a-popconfirm :title='$t("are_you_sure")' ok-text="Yes" okType="danger" cancel-text="No"
                      @confirm="deleteRoom()" :disabled="!deleteSelectedRows">
          <a-icon slot="icon" type="question-circle-o" style="color: red"/>
          <a-button type="danger" :loading="submitLoading" :disabled="!deleteSelectedRows">
            {{ $t("delete") }}{{ $t('room') }}
          </a-button>
        </a-popconfirm>
        <a-popconfirm :title='$t("are_you_sure")' ok-text="Yes" okType="danger" cancel-text="No"
                      @confirm="recoveryRoom()" :disabled="!recoverySelectedRows">
          <a-icon slot="icon" type="question-circle-o" style="color: red"/>
          <a-button :loading="submitLoading" :disabled="!recoverySelectedRows">
            {{ $t("recovery") }}{{ $t('room') }}
          </a-button>
        </a-popconfirm>
        <a-button :icon="loading ? 'loading' : 'reload'" @click="fetchData()">
        </a-button>
      </a-space>
    </template>

    <a-table size="small" :columns="columns" :data-source="roomList" :pagination="{ showSizeChanger: true, showQuickJumper: true, size:'middle', showTotal:(total, range) => `${range[0]}-${range[1]} / ${total}`, current: pageIndex, pageSize: pageSize, total: total, pageSizeOptions:['10','20','30','50','100','1000','2000'], }" :row-key="record => record.id" :loading="loading" @change="handleTableChange"  :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
      <a-icon slot="status" slot-scope="text" :type="text?'check-circle':'close-circle'" :style="text?'color:#52c41a;font-size: 18px;':'font-size: 18px;'"/>
      <template slot="roomNameEn" slot-scope="text, record">
        {{ record.roomNameEn }} <br /> {{ record.roomNameCn }}
      </template>
      <template v-for="(item, index) in columns" :slot="item.slotName">
        <span :key="index">{{ $t(item.slotName) }}</span>
      </template>
    </a-table>
  </a-card>
</template>

<script>
import {getRoomList,deleteRooms,restoreRooms} from '@/services/supplier'

export default {
  name: "SupplierRoom",
  props: ['HotelId'],
  i18n: require('../i18n'),
  data() {
    return {
      roomList: [],
      columns: [
        {
          dataIndex: 'supplier',
          align: 'left',
          slotName: "supplier",
          slots: { title: 'supplier' },
          sorter: (a, b) => a.supplier.localeCompare(b.supplier),
        },{
          dataIndex: 'supplierHotelId',
          align: 'left',
          slotName: "supplier_hotel_id",
          slots: { title: 'supplier_hotel_id' },
          sorter: (a, b) => a.supplierHotelId.localeCompare(b.supplierHotelId),
        },
        {
          dataIndex: 'supplierRoomId',
          align: 'left',
          slotName: "supplier_room_id",
          slots: { title: 'supplier_room_id' },
        },{
          dataIndex: 'roomNameEn',
          align: 'left',
          slotName: "room_name",
          slots: { title: 'room_name' },
          scopedSlots: { customRender: 'roomNameEn' },
          sorter: (a, b) => a.roomNameEn.localeCompare(b.roomNameEn),
        },{
          dataIndex: 'maxOccupancy',
          align: 'center',
          slotName: "max_occupancy",
          slots: { title: 'max_occupancy' },
        },{
          dataIndex: 'roomStatus',
          align: 'center',
          slotName: "status",
          slots: { title: 'status' },
          scopedSlots: { customRender: 'status' },
        },{
          dataIndex: 'updatedTime',
          align:'center',
          slotName: "updatedTime",
          slots: { title: 'updatedTime' },
        },{
          dataIndex: 'thirdPartyId',
          align: 'left',
          slotName: "third_party_id",
          slots: { title: 'third_party_id' },
        },{
          dataIndex: 'roomDesc',
          align: 'left',
          slotName: "room_desc",
          slots: { title: 'room_desc' },
        },
      ],
      loading: false,
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      submitLoading: false,
      selectedRows: [],
      selectedRowKeys: [],
      deleteSelectedRows: false,
      recoverySelectedRows: false,
    }
  },
  methods: {
    fetchData(){
      this.loading = true
      this.selectedRowKeys = []
      this.selectedRows = []
      this.deleteSelectedRows = false
      this.recoverySelectedRows = false
      getRoomList(this.pageIndex, this.pageSize, {hotelId:this.$props.HotelId}).then(res => {
        const {rows, total} = res.data.data
        this.roomList = rows
        this.total = total
        this.loading = false
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    handleTableChange(pagination) {
      if (this.pageIndex === pagination.current && this.pageSize === pagination.pageSize)
        return

      this.pageIndex = pagination.current;
      this.pageSize = pagination.pageSize;
      this.fetchData()
    },
    deleteRoom() {
      if (this.selectedRows.length == 0) {
        this.$message.error(this.$t('no_item_selected'))
        return
      }
      this.submitLoading = true
      deleteRooms(this.selectedRows).then(res => {
        if (res.data.success) {
          this.$message.success({content: this.$t('deleteSuccess')})
          this.fetchData()
          this.submitLoading = false
        } else {
          this.$message.error({content: this.$t(res.data.message)})
        }
      }).catch(error => {
        console.log(error)
      })
    },
    recoveryRoom() {
      if (this.selectedRows.length == 0) {
        this.$message.error(this.$t('no_item_selected'))
        return
      }
      this.submitLoading = true
      restoreRooms(this.selectedRows).then(res => {
        if (res.data.success) {
          this.$message.success({content: this.$t('recoverySuccess')})
          this.fetchData()
          this.submitLoading = false
        } else {
          this.$message.error({content: this.$t(res.data.message)})
        }
      }).catch(error => {
        console.log(error)
      })
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.deleteSelectedRows = false
      this.recoverySelectedRows = false
      this.selectedRows.forEach(item => {
        if (item.roomStatus) {
          this.deleteSelectedRows = true
          this.recoverySelectedRows = false
        } else {
          this.recoverySelectedRows = true
          this.deleteSelectedRows = false
        }
      })
    }
  },
  created() {
    this.fetchData()
  },
}
</script>